<template>
  <!-- 增改用户弹框 -->
  <hcDialog dialogWidth="30%" :dialogTitle="options.type === 'add' ? '新增报告' : '编辑报告'" :isVisable="options.show" @closeDialog="closeFun" @openDialog="openFun">
    <el-form ref="formRef" :model="form" label-width="6vw" status-icon :rules="rules" :validate-on-rule-change="false">
      <el-form-item prop="report_name" label="报告名称">
        <el-input v-model="form.report_name"> </el-input>
      </el-form-item>
      <el-form-item prop="description" label="报告描述">
        <el-input v-model="form.description"> </el-input>
      </el-form-item>

      <el-form-item prop="reportDetail" label="变量名称">
        <el-select v-model="form.reportDetail" multiple filterable>
          <el-option v-for="item of varArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="enabled" label="是否可用">
        <el-select v-model="form.enabled">
          <el-option label="可用" :value="true"></el-option>
          <el-option label="禁用" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="btns">
          <el-button type="primary" @click="saveDialog()">{{ t("common.saveText") }}</el-button>
          <el-button @click="closeFun">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </hcDialog>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";

import { AddReport, updateReport, getVariable } from "@/api/secs";
import { useI18n } from "vue-i18n";
let { t } = useI18n();

const emit = defineEmits(["closeDialog"]);

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        show: false,
        type: "add", // 用于判断是编辑还是删除 add edit
        data: null, // 当前编辑的用户
      };
    },
  },
});

const formRef = ref();
const form = reactive({
  id: 0,
  report_name: "",
  description: "",
  reportDetail: [],
  enabled: true,
});
let varArr = ref([]);

const rules = {
  report_name: [{ required: true, message: "请输入报告名称", trigger: "blur" }],
};

function saveDialog() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = "";
      let reportDetail = form.reportDetail.map((item) => {
        return {
          svid: item,
          enabled: true,
        };
      });
      if (props.options.type === "edit") {
        res = await updateReport({ ...form, reportDetail });
      } else {
        res = await AddReport({ ...form, reportDetail });
      }
      if (res) {
        ElMessage.success("保存成功");
        emit("closeDialog", true);
      } else {
        ElMessage.error("保存失败");
      }
    }
  });
}

// 关闭弹框
const closeFun = () => {
  formRef.value?.resetFields();
  emit("closeDialog");
};

function openFun() {
  if (props.options.type === "edit") {
    for (let key in form) {
      form[key] = props.options.data[key];
    }
  }
}

async function getAllVar() {
  let res = await getVariable();
  varArr.value = res?.items?.map((item) => {
    return {
      label: item.variable_name,
      value: item.id,
    };
  });
}

onMounted(() => {
  getAllVar();
});
</script>
<style lang="scss" scoped></style>
